<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="../plugins/jquery-2.1.0.js"></script>
		<style>
			.number {
				background: #00BBEC;
				text-align: center;
				height: 30px;
				line-height: 30px;
				font-size: 14px;
				overflow: hidden;
				margin-left: 0.15rem;
				color: #000000;
				padding: 0 20px;
				display: inline-block;
			}
		</style>
	</head>

	<body>
		<div class="price-div" id="container1"></div>
		<div class="price-div" id="container2"></div>
	
		<script>
			var rollInterval, total = 0;

			initPage($('#container1'), 6); // 初始化滚动数字最大的位数
			//initPage($('#container2'), 6); // 初始化滚动数字最大的位数

			var numItemHeight = $('.num-item').eq(0).height(); // 获取数字dom的高度

			rollInterval = setInterval(fun, 1000); // 定时获取实时数据，实现数字滚动

			function fun() {
				total = total + 10;
				numberRoll($('#container1'), total);
				numberRoll($('#container2'), Math.floor(Math.random() * 1000000));
			}

			function numberRoll(container, total) {
				var number = total.toString().split("").reverse().join("");
				for(var i = 0; i < number.length; i++) {
					// 目标值如果比原本值大，则向上滚动，如果小则向下滚动（0 -> 3 从下往上滚动3个单元格高度 margeTop = -90px 反之 从上往下滚3个单元格高度 margeTop = 90px）
					var height = parseInt(number[i]) * numItemHeight;
					$(container).find('.num' + i + ' .numbers-view').animate({
						marginTop: -height
					}, 1000, "swing");
				}
			}

			function initPage(container, digit) {
				var uId = generateUniqueId();
				// $(container).attr('id', uId);
				var _html = '';
				for(var i = digit - 1; i >= 0; i--) {
					_html += '<div class="number num' + i + '">' +
						'<div class="numbers-view">' +
						'<div class="num-item zero">0</div>' +
						'<div class="num-item one">1</div>' +
						'<div class="num-item two">2</div>' +
						'<div class="num-item three">3</div>' +
						'<div class="num-item four">4</div>' +
						'<div class="num-item five">5</div>' +
						'<div class="num-item six">6</div>' +
						'<div class="num-item seven">7</div>' +
						'<div class="num-item eight">8</div>' +
						'<div class="num-item nine">9</div>' +
						'</div>' +
						'</div>';
				}
				container.html(_html);
			};

			// 生成唯一主键id
			function generateUniqueId() {
				var d = new Date().getTime();
				var uuid = 'xxxxxxxx_xxxx_4xxx_yxxx_xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
					var r = (d + Math.random() * 16) % 16 | 0;
					d = Math.floor(d / 16);
					return(c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
				});
				return uuid;
			};
		</script>
	</body>

</html>